IFrame Player API로 youtube 동영상 가져오기

✒️ 2025-05-26 13:10 내용 수정

• 유튜브 공식 API 설명 : Youtube IFrame Player API
• 참고 자료 : 푸른 나라's HTML로 동영상 삽입, 유투브 동영상 링크 삽입하기
• 프로젝트에서 잠깐 사용하기 위해 공식 문서에 나온 예제를 수정해서 사용했다.
  • 자동 재생 및 중단 이벤트를 제거해서 사용자가 페이지에 들어오고, 재생 버튼을 눌러야만 재생되도록 설정했다.

// 비디오 식별자 가져오기
let link = document.getElementById("address"); // html에서 input에 있는 value를 가져온다.
let videoId = link.value.substring(32, 43); // https://www.youtube.com/watch?v=videoID&ab_channel=채널이름

var tag = document.createElement('script');
// IFrame Player API code 가져오기
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// API 코드 다운 후 <iframe> (그리고 YouTube player) 생성
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	    height: '180',
	    width: '360',
	    videoId: videoId,
	});
}

• html(ejs)에 동영상을 넣을 위치를 <div id="player"></div>로 잡아준다.
  • 공식 문서 설명에 따르면 id를 통해 해당 div의 위치를 동영상 플레이어가 배치될 위치로 식별하고, div 태그를 iframe 태그로 대체한다고 한다.
  • 대체하는 대신에 문서 내에 iframe 요소를 직접 추가할 수도 있다.

<!-- 프로젝트에선 table 태그 안에다가 추가했다 -->
<td colspan="2">
	<!-- MySQL에 저장된 주소를 가져와서 사용하기 위해 hidden타입 input을 배치했다. -->
	<input type="hidden" name="address" id="address" value="<%= music.address %>">
	<!-- id="player"를 가진 div 태그가 script에 의해 iframe으로 바뀐다. -->
	<div id="player"></div> 
</td>

• 페이지를 가동하면 요소를 확인 했을 때 div 태그가 바뀐 것을 볼 수 있다.

• 페이지에선 유튜브 동영상을 바로 실행할 수 있다.

• 주의사항 : iframe을 사용할 때 보안 문제, 사용성 및 웹 크롤링 문제가 존재하므로 이 부분을 고려하여 iframe을 사용하거나 다른 방법으로 영상을 가져와야 한다.
  • 참고 자료 : 코딩팩토리 HTML iframe 태그 사용법 & 예제 총정리
• 개발자 도구에서도 상당한 오류 로그들을 볼 수 있다.